@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@100;300;400;500;700;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Design system colors */
    --primary: 239 89% 64%;
    --primary-hover: 238 62% 51%;
    --primary-active: 238 65% 43%;
    --secondary: 240 93% 95%;
    --primary-100: 235 85% 97%;
    --white: #ffffff;

    --foreground-secondary: 224 71% 4%;
    --muted-gray: 218 11% 65%;
    --muted-disabled: 220 14% 96%;

    --muted-slate: 215 16%, 47%;
    --light-slate: 215 20% 65%;
    --slate-300: 213 27% 84%;
    --border: 214 32% 92%;
    --breadcrumb-last: 216 20% 40%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --background: 0 0% 100%;
    --foreground: 224 17% 26%;

    --soft-background: 240 20% 99%;

    /* other colors */
    --tooltip: 224 17% 26%;
    --tooltip-foreground: 0 0% 100%;

    --popover-gray: 240 14% 99%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 348 86% 61%;
    --destructive-foreground: 210 40% 98%;

    --input: 214.3 31.8% 91.4%;
    --ring: 239 89% 64%;

    --warning: 348 86% 61%;
    --success: 129 100% 42%;

    /* Gray scale for utility classes */
    --gray-100: #f3f4f6;

    /* Special button colors */
    --special-button: #19a979;
    --special-button-hover: #1e8a66;
    --special-button-active: #1a7557;

    /* Toggle colors */
    --toggle-outline-active: #f3f4fe;

    /* CodeMirror theme colors */
    --codemirror-background: #f8fafc;
    --codemirror-gutter: #94a3b8;
    --codemirror-line-highlight: #e6e6fe;
    --codemirror-syntax-blue: #005cc5;

    /* Chart colors */
    --chart-tick-stroke: #373d4d;
    --chart-grid-stroke: #f1f5f8;

    /* DataTable colors */

    /* Trace thread colors */
    --thread-active: #ebf2f5;
    --thread-inactive: #e2effd;
    --thread-icon-background: #dedefd;
    --thread-icon-text: #1b1c7e;
    --message-input-background: #e7ecff;

    /* Action cards */
    --action-card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
      0 2px 4px -2px rgb(0 0 0 / 0.1);

    /* Action types */
    --action-trace-background: #dafbf0;
    --action-trace-text: #295747;
    --action-experiment-background: #fde2f6;
    --action-experiment-text: #72275f;
    --action-guardrail-background: #fee3d7;
    --action-guardrail-text: #73422b;
    --action-playground-background: #efe2fd;
    --action-playground-text: #491b7e;

    /* Feature/brand colors */
    --feature-experiment-management: #6c6ff7;
    --feature-llm: #52aea4;

    /* Error indicator colors */
    --error-indicator-background: #ffd2d2;
    --error-indicator-text: #822c45;

    /* Search highlight colors */
    --search-highlight: #ffdf20;
    --search-current-highlight: #ff8904;

    /* Diff colors */
    --diff-removed-bg: #fde2e7;
    --diff-removed-text: #931a32;
    --diff-added-bg: #e2fde6;
    --diff-added-text: #1d6728;

    /* Upload field colors */
    --upload-icon-bg: 213 26.8% 83.9%;

    /* Code block colors */
    --code-block: #fbfcfd;

    /* Welcome banner gradient colors */
    --banner-gradient-start: #060a28;
    --banner-gradient-end: #604fff;

    /* Scrollbar colors */
    --scrollbar-thumb: #babac0;
    --scrollbar-thumb-hover: #7d7d7d;
    --scrollbar-background: #ffffff;

    /* Modern color variants for tags and charts */
    --color-gray: #64748b;
    --color-purple: #8b5cf6;
    --color-burgundy: #bf399e;
    --color-pink: #f43f5e;
    --color-red: #ef4444;
    --color-orange: #f97316;
    --color-yellow: #eab308;
    --color-green: #10b981;
    --color-turquoise: #06b6d4;
    --color-blue: #3b82f6;
    --color-primary: #6366f1;
    --color-indigo: #6366f1;
    --color-violet: #8b5cf6;
    --color-emerald: #10b981;
    --color-cyan: #06b6d4;
    --color-rose: #f43f5e;

    /* Tag variant background and text colors */
    --tag-gray-bg: #f3f4f6;
    --tag-purple-bg: #efe2fd;
    --tag-purple-text: #491b7e;
    --tag-burgundy-bg: #fde2f6;
    --tag-burgundy-text: #72275f;
    --tag-pink-bg: #fde2ea;
    --tag-pink-text: #822c45;
    --tag-red-bg: #fdc9c9;
    --tag-red-text: #4e1d1d;
    --tag-orange-bg: #fee3d7;
    --tag-orange-text: #73422b;
    --tag-yellow-bg: #fef0c8;
    --tag-yellow-text: #675523;
    --tag-green-bg: #dafbf0;
    --tag-green-text: #295747;
    --tag-turquoise-bg: #cdf5f9;
    --tag-turquoise-text: #15545b;
    --tag-blue-bg: #e2effd;
    --tag-blue-text: #19426b;

    /* Info box colors (blue variant for informational content) */
    --info-box-bg: 214 100% 92%;
    --info-box-text: 224 76% 40%;
    --info-box-icon-bg: 214 100% 92%;
    --info-box-icon-text: 217 91% 60%;

    /* Warning/tip box colors (amber variant for tips and warnings) */
    --warning-box-bg: 45 93% 89%;
    --warning-box-text: 32 85% 32%;
    --warning-box-icon-bg: 45 93% 58%;
    --warning-box-icon-text: 32 85% 32%;

    --radius: 0.5rem;

    --header-height: 60px;
    --sidebar-width: 61px;
  }

  .dark {
    /* Design system colors */
    --primary: 223 91% 60%;
    --primary-hover: 217 91% 70%;
    --primary-active: 220, 91%, 67%;
    --secondary: 0, 0%, 18%;
    --primary-100: 222, 25%, 14%;
    --white: #ffffff;

    --foreground-secondary: 214, 32%, 91%;
    --muted-gray: 0, 0%, 30%;
    --muted-disabled: 0, 0%, 14%;

    --muted-slate: 0, 0%, 64%;
    --light-slate: 0, 0%, 64%;
    --slate-300: 213 27% 84%;
    --border: 0, 0%, 16%;
    --breadcrumb-last: 214, 32%, 91%;
    --secondary-foreground: 0, 0%, 10%;
    --primary-foreground: 0, 0%, 11%;

    --background: 0, 0%, 7%;
    --foreground: 214, 32%, 91%;

    --soft-background: 0, 0%, 7%;
    --accent-background: 0, 0%, 9%;

    /* other colors - Dark Mode */
    --tooltip: 0, 0%, 9%;
    --tooltip-foreground: 214, 32%, 91%;

    /* Legacy variables - Dark Mode (for backward compatibility) */
    --input: 0, 0%, 16%;
    --ring: 217.2 91.2% 59.8%;

    /* Popover colors - Dark Mode */
    --popover-gray: 217.2 32.6% 10%;

    --muted-foreground: 0, 0%, 64%;
    --accent: 0, 0%, 12%;
    --accent-foreground: 210 40% 98%;

    --destructive: 348 86% 61%;
    --destructive-foreground: 210 40% 98%;

    --warning: 348 86% 61%;
    --success: 129 100% 42%;

    /* Gray scale for utility classes - Dark Mode */
    --gray-100: 217.2 32.6% 15%;

    /* Special button colors - Dark Mode */
    --special-button: #20ac74;
    --special-button-hover: #219c6a;
    --special-button-active: #1e9a65;

    /* Action cards - Dark Mode */
    --action-card-shadow: 0 4px 6px -1px rgb(255 255 255 / 0.1),
      0 2px 4px -2px rgb(255 255 255 / 0.05);

    /* Action types - Dark Mode (darker backgrounds, lighter text) */
    --action-trace-background: #29322f;
    --action-trace-text: #14bb83;
    --action-experiment-background: #2b2229;
    --action-experiment-text: #cf44ad;
    --action-guardrail-background: #322d29;
    --action-guardrail-text: #ff9847;
    --action-playground-background: #2e2932;
    --action-playground-text: #a06dd9;

    /* Feature colors - Dark Mode */
    --feature-experiment-management: #3b70f6;
    --feature-llm: #20ac74;

    /* Muted colors - Dark Mode */
    --muted: 0, 0%, 11%;

    /* Toggle colors - Dark Mode */
    --toggle-outline-active: #2c3c56;

    /* Thread colors - Dark Mode */
    --thread-icon-background: #2e2932;
    --thread-icon-text: #a06dd9;
    --thread-active: #2a3f2f;
    --thread-inactive: #2a3447;
    --message-input-background: #2a2f47;

    /* CodeMirror theme colors - Dark Mode (GitHub Dark theme) */
    --codemirror-background: #1c1c1c;
    --codemirror-gutter: #7d8590;
    --codemirror-line-highlight: rgba(255, 255, 255, 0.08);
    --codemirror-syntax-blue: #79c0ff;

    /* Chart colors */
    --chart-tick-stroke: #a3a3a3;
    --chart-grid-stroke: #303030;

    /* Diff colors - Dark Mode */
    --diff-removed-bg: #7f1d1d;
    --diff-removed-text: #fef2f2;
    --diff-added-bg: #14532d;
    --diff-added-text: #bbf7d0;

    /* Upload field colors - Dark Mode */
    --upload-icon-bg: 215 19.3% 34.5%;

    /* Code block colors - Dark Mode */
    --code-block: #1c1c1c;

    /* Welcome banner gradient colors - Dark Mode */
    --banner-gradient-start: #0f172a;
    --banner-gradient-end: hsl(var(--primary));

    /* Scrollbar colors - Dark Mode */
    --scrollbar-thumb: #242424;
    --scrollbar-thumb-hover: #2e2e2e;
    --scrollbar-background: #121212;
    /* Tag variant background and text colors - Dark Mode */
    --tag-gray-bg: #242424;
    --tag-purple-bg: #2e2932;
    --tag-purple-text: #a06dd9;
    --tag-burgundy-bg: #2b2229;
    --tag-burgundy-text: #cf44ad;
    --tag-pink-bg: #2e2427;
    --tag-pink-text: #f45d8a;
    --tag-red-bg: #322929;
    --tag-red-text: #f36d6d;
    --tag-orange-bg: #322d29;
    --tag-orange-text: #ff9847;
    --tag-yellow-bg: #323029;
    --tag-yellow-text: #ebad00;
    --tag-green-bg: #29322f;
    --tag-green-text: #14bb83;
    --tag-turquoise-bg: #293232;
    --tag-turquoise-text: #0fbfd2;
    --tag-blue-bg: #292e32;
    --tag-blue-text: #6eabe7;

    /* Info box colors - Dark Mode */
    --info-box-bg: 224 76% 33%;
    --info-box-text: 221 83% 78%;
    --info-box-icon-bg: 232 94% 48%;
    --info-box-icon-text: 213 93% 68%;

    /* Warning/tip box colors - Dark Mode */
    --warning-box-bg: 32 85% 32%;
    --warning-box-text: 48 96% 64%;
    --warning-box-icon-bg: 32 95% 44%;
    --warning-box-icon-text: 45 93% 58%;
  }

  /* CodeMirror cursor and selection fix for dark mode */
  .dark .cm-cursor {
    border-left-color: hsl(var(--text-primary)) !important;
  }

  .dark .cm-selectionBackground {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .dark .cm-focused .cm-selectionBackground {
    background-color: rgba(255, 255, 255, 0.15) !important;
  }

  .dark thead th {
    background-color: hsl(var(--accent-background));
  }

  /* Playground table headers - no background in dark mode */
  .dark .playground-table thead th {
    background-color: transparent;
  }

  .comet-expanded {
    --sidebar-width: 240px;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground comet-body;
  }
}

/* custom classes */
@layer base {
  .comet-title-xl {
    @apply font-medium text-3xl tracking-normal text-foreground-secondary;
  }

  .comet-title-l {
    @apply font-medium text-2xl tracking-normal text-foreground-secondary;
  }

  .comet-title-m {
    @apply font-medium text-xl tracking-normal text-foreground-secondary;
  }

  .comet-title-s {
    @apply font-medium text-lg tracking-normal text-foreground-secondary;
  }

  .comet-title-xs {
    @apply font-medium text-sm tracking-normal text-foreground-secondary;
  }

  .comet-body {
    @apply font-normal text-base tracking-normal text-foreground-secondary;
  }

  .comet-body-accented {
    @apply comet-body font-medium;
  }

  .comet-body-s {
    @apply font-normal text-sm tracking-normal;
  }

  .comet-body-s-accented {
    @apply comet-body-s font-medium;
  }

  .comet-body-xs {
    @apply font-normal text-xs tracking-normal;
  }

  .comet-body-xs-accented {
    @apply comet-body-xs font-medium;
  }

  .comet-code {
    @apply font-normal text-sm tracking-normal;
    font-family:
      Ubuntu Mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }

  .comet-header-height {
    height: var(--header-height);
  }

  .comet-header-inset {
    top: var(--header-height);
  }

  .comet-sidebar-width {
    width: var(--sidebar-width);
  }

  .comet-content-inset {
    --comet-content-width: calc(100vw - var(--sidebar-width));
    left: var(--sidebar-width);
  }

  .comet-table-row-active[data-row-active="true"] td {
    background: hsl(var(--primary-foreground));
  }

  code,
  kbd,
  samp,
  pre {
    font-family:
      Ubuntu Mono,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace;
  }

  /* Custom scrollbar styling that adapts to website theme
   * Problem: Browsers use OS scrollbar appearance which may not match website theme
   * - User has light OS theme + website in dark mode = light scrollbars on dark UI (jarring)
   * - User has dark OS theme + website in light mode = dark scrollbars on light UI (inconsistent)
   * Solution: Force custom scrollbar styling that adapts to website theme changes
   * - Dark theme: Apply dark scrollbars regardless of OS preference (.dark body)
   * - Light theme (non-Windows): Use default OS scrollbars for better native feel
   * - Windows: Always use custom styling due to poor default scrollbar UX (.comet-custom-scrollbar)
   */
  .dark body,
  body.comet-custom-scrollbar {
    &.firefox {
      scrollbar-color: var(--scrollbar-thumb) transparent;
      scrollbar-width: thin;
    }

    ::-webkit-scrollbar {
      background-color: var(--scrollbar-background);
      width: 16px;
    }

    ::-webkit-scrollbar-track {
      background-color: var(--scrollbar-background);
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar-thumb);
      border-radius: 16px;
      border: 4px solid var(--scrollbar-background);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }

    ::-webkit-scrollbar-corner {
      background: var(--scrollbar-background);
    }

    ::-webkit-scrollbar-button {
      display: none;
    }
  }

  .comet-no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .comet-no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .action-card-shadow {
    box-shadow: var(--action-card-shadow);
  }

  .hover\:action-card-shadow:hover {
    box-shadow: var(--action-card-shadow);
  }

  .hover\:bg-\[var\(--thread-active\)\]\/80:hover {
    background-color: rgba(var(--thread-active), 0.8);
  }
}

// Table

// workaround to force firefox work correctly with cell height - https://stackoverflow.com/questions/36575846/how-to-make-div-fill-td-height-in-firefox
.comet-fix-cell-height {
  height: 1px;
}

@-moz-document url-prefix() {
  .comet-fix-cell-height {
    height: 100%;
  }
}

// rewrite padding for first cell for tables that takes full width with sticky behaviour
.comet-sticky-table {
  thead:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: hsl(var(--border));
    z-index: 10;
  }

  thead:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: hsl(var(--border));
    z-index: 10;
  }

  td:first-child [data-cell-wrapper="true"],
  th:first-child [data-header-wrapper="true"] {
    padding-left: 24px !important;
  }

  td:last-child [data-cell-wrapper="true"],
  th:last-child [data-header-wrapper="true"] {
    padding-right: 24px !important;
  }
}

.comet-compare-optimizations-table {
  thead[data-sticky-vertical] {
    top: 0 !important;
  }

  thead:before {
    height: 0 !important;
  }

  table {
    border-bottom: 1px solid hsl(var(--border)) !important;
  }
}

.comet-table {
  /* resets padding for all nested cells wrappers */
  td [data-cell-wrapper="true"] [data-cell-wrapper="true"],
  th [data-header-wrapper="true"] [data-header-wrapper="true"] {
    padding: unset !important;
  }
}

.comet-line-highlight {
  position: relative;

  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
    background: var(--secondary);
  }
}

.comet-markdown {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;

  pre code {
    font-size: 0.875rem !important;
    white-space: preserve-breaks;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

.comet-button-badge {
  position: relative;
  --size: 10px;

  &:before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--size) / 2);
    right: calc(-1 * var(--size) / 2);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid hsl(var(--background));
    background: hsl(var(--destructive));
  }
}

div.cm-theme div.cm-search.cm-panel {
  @apply px-2 py-1;

  input {
    @apply h-8 px-3 pb-1.5 pt-1 rounded-md bg-background text-sm placeholder:text-light-slate focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-muted-disabled disabled:text-muted-gray disabled:placeholder:text-muted-gray;
  }

  .cm-button {
    @apply leading-none text-foreground h-8 px-3 comet-body-s border border-border bg-background hover:text-foreground active:bg-primary-100 active:text-foreground disabled:border-muted-disabled disabled:text-muted-gray disabled:opacity-100 whitespace-nowrap rounded-md transition-colors focus-visible:outline-none disabled:pointer-events-none bg-none disabled:bg-muted-gray;
  }

  label {
    @apply hidden;
  }

  button[name="close"] {
    @apply top-0 bottom-px my-auto leading-none size-6 opacity-50 hover:opacity-100;
  }
}

/* Collapsible headings styles */
.collapsible-heading {
  @apply border border-border rounded-lg mb-4;

  /* Summary styling */
  summary.collapsible-heading-summary {
    @apply cursor-pointer p-4 hover:bg-muted/50 transition-colors;
    list-style: none; /* Remove default arrow */

    /* Custom arrow */
    &::before {
      content: "▶";
      @apply inline-block mr-2 text-muted-foreground transition-transform duration-200;
    }

    /* Rotate arrow when open */
    &::-webkit-details-marker {
      display: none;
    }
  }

  /* Content wrapper */
  .collapsible-heading-content {
    @apply p-4 pt-0 border-t border-border;
  }

  /* When open, rotate arrow */
  &[open] summary.collapsible-heading-summary::before {
    transform: rotate(90deg);
  }

  /* Dark theme adjustments */
  .dark & {
    @apply border-border;

    summary.collapsible-heading-summary {
      @apply hover:bg-muted/30;
    }
  }
}

/* Specific styling for collapsible headings in markdown */
.comet-markdown .collapsible-heading {
  /* Ensure proper spacing with other markdown elements */
  margin: 1rem 0;

  /* Style headings inside collapsible sections */
  .collapsible-heading-content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      @apply mt-4 mb-2;

      &:first-child {
        @apply mt-0;
      }
    }

    p {
      @apply mb-2;

      &:last-child {
        @apply mb-0;
      }
    }

    ul,
    ol {
      @apply mb-2;

      &:last-child {
        @apply mb-0;
      }
    }
  }
}

/* Dashboard section sorting styles */
.dashboard-section-sorting {
  /* Hide accordion content during drag/sort operation */
  /* This provides better UX by collapsing all sections while dragging */
  /* The expanded state is preserved and restored after drag ends */
  [data-state="open"] [data-radix-accordion-content] {
    display: none;
  }
}

/* Dashboard widget grid layout styles */
.react-grid-item.react-grid-placeholder {
  background-color: rgb(59, 130, 246) !important;
  opacity: 0.2;
}

/* Dashboard widget resize handle styles */
.react-grid-item > .react-resizable-handle::after {
  border-color: hsl(var(--light-slate)) !important;
  transition: border-color 0.2s ease-in-out;
}

.react-grid-item:hover > .react-resizable-handle::after {
  border-color: hsl(var(--muted-slate)) !important;
}
